/**
 * <pre>
 *     author : XML
 *     e-mail : 946891360@qq.com
 *     time   : 2019/07/03
 *     version:
 *     desc   :
 * </pre>
 */

import React, {Component} from 'react';
import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome'

export default class PopularItem extends Component {
    render() {
        const {item} = this.props;
        if (!item || !item.owner) return null;
        let favoriteButton = <TouchableOpacity
            style={{padding: 6}}
            onPress={() => {
            }}
            underlayColor={'transparent'}
        >
            <FontAwesome
                name={"star-o"}
                size={20}
                style={{color: 'red'}}
            />
        </TouchableOpacity>;
        return (
            <TouchableOpacity
                onPress={this.props.onSelect}
            >
                <View style={styles.cell_container}>
                    <Text style={styles.title}>
                        {item.full_name}
                    </Text>
                    <Text style={styles.description}>
                        {item.description}
                    </Text>
                    <View style={styles.row}>
                        <View style={styles.author}>
                            <Text>Author:</Text>
                            <Image
                                style={{height: 15, width: 15, borderRadius: 2, marginLeft: 5}}
                                source={{uri: item.owner.avatar_url}}
                            />
                        </View>
                        <View style={styles.stars}>
                            <Text>Stars:</Text>
                            <Text>{item.stargazers_count}</Text>
                        </View>
                        {favoriteButton}
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    cell_container: {
        backgroundColor: 'white',
        padding: 10,
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 3,
        borderColor: '#dddddd',
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 1,
        elevation: 2
    },
    row: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center'
    },
    title: {
        fontSize: 16,
        marginBottom: 2,
        color: '#212122'
    },
    description: {
        fontSize: 14,
        marginBottom: 2,
        color: '#313133'
    },
    author: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    stars: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    }

});

